<template>
  <div class="introduce">
    <div class="introduce_app">
      <div class="introduce_centent">
        <h1>{{ruleForm.mineName}}</h1>
        <p>
         {{ ruleForm.introduction }}
        </p>
        <div class="edit" @click="mingShow">
          <el-button type="primary">编辑</el-button>
        </div>

        <div class="imgList">


          <div class="imgItem" v-for="(item, index) in imgList" :key="index">
            <el-image style="width:580px;height:340px;" class="el_img" :src="item" :preview-src-list="imgList"></el-image>
          </div>


        </div>
      </div>
    </div>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="70%" center>
      <el-form :model="ruleForm"  ref="ruleForm" label-width="150px" class="demo-ruleForm"
        label-position="left">
        <el-form-item label="企业名称">
          <el-input v-model="ruleForm.mineName"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="ruleForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="所属区县">
          <el-input v-model="ruleForm.countyId"></el-input>
        </el-form-item>
        <el-form-item label="企业成立时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createMineDate"
            style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input v-model="ruleForm.taxNo"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人">
          <el-input v-model="ruleForm.legalPerson"></el-input>
        </el-form-item>
        <el-form-item label="法定证件号">
          <el-input v-model="ruleForm.legalPersonNo"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="ruleForm.miner"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="上级公司">
          <el-input v-model="ruleForm.upperCompany"></el-input>
        </el-form-item>
        <el-form-item label="开拓方式">
          <el-input v-model="ruleForm.digStyle"></el-input>
        </el-form-item>
        <el-form-item label="井口标高">
          <el-input v-model="ruleForm.pithead"></el-input>
        </el-form-item>
        <el-form-item label="开采中段情况">
          <el-input v-model="ruleForm.situation"></el-input>
        </el-form-item>
        <el-form-item label="人员情况">
          <el-input v-model="ruleForm.peopleCondition"></el-input>
        </el-form-item>
        <el-form-item label="开采矿种">
          <el-select v-model="ruleForm.mineralsId" placeholder="请选择开采矿种">
            <template v-for="item in typeList">
              <el-option :label="item.minerals" :value="item.id" :key="item.id"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="矿山类型">
          <el-select v-model="ruleForm.mineType" placeholder="请选择矿山类型">
            <el-option label="露天" :value="1"></el-option>
            <el-option label="地下" :value="2"></el-option>
            <el-option label="尾矿库" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规模">
          <el-select v-model="ruleForm.mineScale" placeholder="请选择开采矿种">
            <el-option label="小型" :value="1"></el-option>
            <el-option label="中型" :value="2"></el-option>
            <el-option label="大型" :value="3"></el-option>
            <el-option label="特大型" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产规模">
          <el-input v-model="ruleForm.scale"></el-input>
        </el-form-item>
        <!-- <el-form-item label="矿山编号" >
          <el-input v-model="ruleForm.mineId"></el-input>
        </el-form-item> -->
        <el-form-item label="矿区面积平方米">
          <el-input v-model="ruleForm.acreage"></el-input>
        </el-form-item>
        <el-form-item label="安全标准化建设等级">
          <el-select v-model="ruleForm.buildCase" placeholder="请选安全标准化建设等级">
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
            <el-option label="三级" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标准化建设生效日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.caseValidDate"
            style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="标准化建设失效日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.caseUnValidDate"
            style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="风险等级">
          <el-select v-model="ruleForm.riskLevel" placeholder="请选择">
            <el-option label="一级" value="shanghai"></el-option>
            <el-option label="二级" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="矿山简介">
          <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="生产状态">
          <el-select v-model="ruleForm.proStatus" placeholder="请选择活动区域">
            <el-option label="在建" :value="1"></el-option>
            <el-option label="生产" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工单位">
          <el-input v-model="ruleForm.conOrg"></el-input>
        </el-form-item>

        <el-form-item label="施工开始时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.conValidDate"
            style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="施工结束时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.conUnValidDate"
            style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item label="矿山照片">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" 
             :file-list="fileList" list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>

          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>

        <el-form-item label="企业经度">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="企业纬度">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="矿山拐点坐标">
          <el-button type="warning" icon="el-icon-plus">新增</el-button>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="longitude" label="经度" width="180">
            </el-table-column>
            <el-table-column prop="latitude" label="纬度"> </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mineinfo, mineinfoEdit } from "@/api/system/introduce";
export default {
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      tableData: [],
      imgList: [],
      typeList: [
        { id: 8, minerals: "建筑用凝灰岩" },
        { id: 9, minerals: "建筑用大理岩" },
        { id: 12, minerals: "建筑用砂岩" },
        { id: 10, minerals: "建筑用花岗岩" },
        { id: 13, minerals: "建筑用辉绿岩" },
        { id: 20, minerals: "方解石" },
        { id: 7, minerals: "水泥用石灰岩" },
        { id: 15, minerals: "珍珠岩" },
        { id: 18, minerals: "稀土" },
        { id: 19, minerals: "萤石" },
        { id: 5, minerals: "钼矿" },
        { id: 6, minerals: "钾长石" },
        { id: 2, minerals: "铁矿" },
        { id: 4, minerals: "铅锌矿" },
        { id: 1, minerals: "铜矿" },
        { id: 3, minerals: "锑银矿" },
        { id: 16, minerals: "陶瓷土" },
        { id: 11, minerals: "饰面用花岗岩" },
        { id: 14, minerals: "饰面用辉绿岩" },
        { id: 17, minerals: "高岭土" },
      ],
      ruleForm: {
        mineName: "",
        nickName: "",
        createMineDate: "",
        taxNo: "",
        legalPerson: "",
        legalPersonNo: "",
        miner: "",
        tel: "",
        upperCompany: "",
        digStyle: "",
        pithead: "",
        situation: "",
        peopleCondition: "",
        mineType: 1,
        mineScale: "",
        scale: "",
        mineId: 95435,
        acreage: "",
        buildCase: "",
        caseValidDate: "",
        caseUnValidDate: "",
        riskLevel: "",
        address: "",
        introduction: "",
        proStatus: "",
        conOrg: "",
        conValidDate: "",
        conUnValidDate: "",
        introductionImg: "",
        remark: "",
      },
   
    };
  },

  created() {
    this.getMineInfo();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          mineinfoEdit(this.ruleForm).then((res) => {
            if (res.msg=="操作成功") {
              
      this.dialogVisible = false;
      this.getMineInfo();

            
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    mingShow() {
      this.dialogVisible = true;


    },
    getMineInfo() {
      mineinfo({}).then((res) => {
        
        this.ruleForm = res.rows[0];

        // 处理图片
        let imgList = res.rows[0].introductionImg.split(',')

        this.imgList = imgList 
        this.fileList = imgList.map((item, index) => {
         
          return {
            name: index,
            url: item,
          }
        })
        //处理拐点
        let pointList = res.rows[0].mineBorder.split(';')


        this.tableData = pointList.map((item) => {
          return {
            longitude: item.split(',')[0],
            latitude: item.split(',')[1],
          }

        })


      });
    },


  },
};
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  padding: 0 300px;
  height: 800px;
  overflow: auto;

}

.introduce {
  padding: 20px 10px 0 10px;
  background: #f5f5fc;

  .introduce_app {
    background: #fff;
    padding: 40px 60px 0 60px;
    overflow-y: scroll;
    height: 100vh;

    .introduce_centent {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;



      .imgList {
        width: 100%;
        display: grid;
        justify-content: space-around;
        grid-template-columns: repeat(auto-fill, 580px);
        margin-bottom: 600px;
        gap: 20px;

        &::after {
          content: '';
          width: 32%;
        }

        .imgItem {
          flex: 1;
          height: 340px;
        }
      }

      .edit {
        position: absolute;
        right: 0;
        top: 0;
      }

      h1 {
        font-size: 30px;
        color: #000;
        font-weight: 400;
      }

      p {
        color: #687487;
        font-size: 20px;
        line-height: 45px;
        letter-spacing: 2px;
      }
    }
  }
}
</style>